<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 按顺序导入相关的js和css -->
		<link rel="stylesheet" href="../lib/themes/default/easyui.css" type="text/css"/>
		<link rel="stylesheet" href="../lib/themes/icon.css" />
		
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../lib/jquery/jquery.easyui.min.js"></script>
		
		<!-- 导入分页的中文版语言 -->
		<script type="text/javascript" src="../lib/easyui-lang-zh_CN.js"></script>
	</head>
	<body>
		
		<!-- 验证表单  -->
		<form action="#" method="post">
			
			<!-- 1. 验证普通输入框 -->
			姓名：<input id="nameID"/><p/>
			<script type="text/javascript">
				$("#nameID").validatebox({
					required : true,//表示必须输入的选项
					validType : ['length[1,6]','zhongwen']//中文验证规则,长度必须是1-6个中文
				});
				
				//自定义规则:zhongwen,必须继承父规则
				$.extend($.fn.validatebox.defaults.rules, {    
				    //zhongwen规则名
				    zhongwen: {  
				    	//validator验证体  
				    	//value表示用户在文本框中输入的内容
				        validator: function(value){   
				        	//如果符合中文规则 
				        	if(/^[\u3220-\uFA29]*$/.test(value)){
					            return true;    
				        	}
				        }, 
				        //如果不符合中文规则，以下就是提示信息   
				        message: '姓名必须为中文'   
				    }    
				});  
			</script>
			
			
			<!-- 2. 验证邮箱 -->
			邮箱：<input id="emailID"/><p/>
		
			<script type="text/javascript">
				$("#emailID").validatebox({
					required : true,
					validType : ['length[1,30]','email']
				});
			</script>
			
			
			<!-- 3. 验证密码-->
			密码：<input id="passwordID"/><p/>

			<script type="text/javascript">
			
				$("#passwordID").validatebox({
					required : true,
					validType : ['length[6,6]','english']
				});
				
				$.extend($.fn.validatebox.defaults.rules, {    
				    english: {  
				        validator: function(value){   
				        	//正则验证
				        	if(/^[a-zA-Z]/.test(value)){
					            return true;    
				        	}
				        }, 
				        message: '密码必须为英文'   
				    }    
				});  
			</script>
			
			
			<!-- 3. combox 下拉框
				 该控件最终传入到后台的只有valueField的值
			-->
			下拉列表:
			<select id="cityID" class="easyui-combobox" name="city" style="width:200px;">   
				<option>aitem1</option>   
			    <option>bitem2</option>   
			    <option>bitem3</option>
			</select><p/>  
			<!--<input id="cityID" name="dept" > <p></p>-->
			
			<script type="text/javascript">
				
				//给Combobox赋值,一般接受来自后台传过来的数据
//				$("#cityID").combobox({
//					url : "../html/combobox.json",//后台地址
//					valueField :"id",  //key  最终传入后台的值
//		   			textField : "text" //value
//				})
				
				//url表示请求的路径
				//valueField表示传到服务器的值，看不见的
				//textField表示页面中显示的值，看得见
				$("#cityID").combobox({
					//在用户改变选择列表项的时候触发。
					onChange : function(record){
						alert(record);
//						alert(record["text"]+":"+record["value"]);
//						alert($("#cityID").valueField);
					}
				});
			</script>


			<!-- 4. 时间控件 -->
			选择时间：
			<input id="dateID" type="text" class="easyui-datebox" required="required"></input><p/>  
			
			<script>
				//得到选择的日期,并格式化成想要的格式
				$("#dateID").datebox({
					//得到年月日
					onSelect : function(date){
						var year = date.getFullYear();
						var month = date.getMonth()+1;
						var day = date.getDay();
						var time = year+"-"+month+"-"+day;
						alert(time);
					}
				});
			</script>
			
			
			<!-- 5. 数字微调 
				只能使用Javascript创建微调控件。标签创建是无效的。
			-->
			数字微调:<input id="spinerNum" value="2">  <br/>
			您购买了<span id="num"></span>件商品<p/>
			<script>
				//设置微调的格式
				$("#spinerNum").numberspinner({
					min : 1,//最小
					max : 100,//最大
					value : 1,//当前值
				});
				
				//事件
				$("#spinerNum").numberspinner({
					onSpinUp : function(){
						//获取数字微调的当前值
						var value = $("#spinerNum").numberspinner("getValue");
						//将当前值设置到span标签中
						$("#num").text(value).css("color","red");
					},
					onSpinDown : function(){
						//获取数字微调的当前值
						var value = $("#spinerNum").numberspinner("getValue");
						//将当前值设置到span标签中
						$("#num").text(value).css("color","red");
					}
				});

			</script>
			
			
			<!-- 6. 滑动条Slider -->
			选择身高：<div id="sliderID" style="height:200px"></div> 
			<p><font id="tip"></font> 厘米</p>
			<script>
				$("#sliderID").slider({
					mode : "v",//'h'(水平)、'v'(垂直)。
					min : 150,//最小
					max : 190,//最大
					rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],//显示标签旁边的滑块
					showTip : true,//定义是否显示值信息提示。
					value : 150//默认值
				});
			</script>
			
			<script>
				$("#sliderID").slider({
					onChange : function(newValue, oldValue){
						$("#tip").text(newValue);
					}
				});
			</script>
			
			
			<!-- 7. 进度条ProgressBar-->
			<div id="pbID" style="width:400px;"></div> 
			<button class="easyui-linkbutton" id="startID">开始</button>
			<script>
			
				//显示progressBar 属性
				$("#pbID").progressbar({
					"value" : 60//当前进度值
				});
					
				//获取1到9之间的随机数，包含1和9
				function getNum(){
					return Math.floor(Math.random()*9)+1;
				}
				
				//方法和事件
				$("#pbID").progressbar({
					"onChange" : function(newValue, oldValue){
						
					}
				});
				
				//计时器的接受参数
				var timeID = null;
				//函数
				function update(){
					//获取随机值,例如：3
					var num = getNum();
					//获取进度条当前值，例如：99
					var value = $("#pbID").progressbar("getValue");
					//判断
					if(value + num > 100){
						//强行设置进度条的当前值为100
						$("#pbID").progressbar("setValue",100);
						//停止定时器
						window.clearInterval(timeID);
						//按钮生效
						$("#startID").linkbutton("enable");
					}else{
						//设置进度条的当前值为num+value的和
						$("#pbID").progressbar("setValue",(value+num));
					}
				}
				
				//按钮点击事件
				$("#startID").click(function(){
					
					setInterval("update()",300);
					//按钮失效
					$("#startID").linkbutton("disable","disable");
				});
				
			</script>
			
			
		</form>
	
		
		<!-- 8. 对话框 dialog-->
		<input type="button" name="btnDilog" value="警告框"/><br/>
		<input type="button" name="btnDilog" value="确认框"/><br/>
		<input type="button" name="btnDilog" value="输入框"/><br/>
		<input type="button" name="btnDilog" value="显示框"/><br/>
		
		<script>
			$("input[name='btnDilog']").click(function(){
				var btnVal = this.value;//得到按钮的value值
				if(btnVal == "警告框"){
					$.messager.alert("警告框","继续努力","warning",function(){
						//...关闭窗口的时候出发该回调函数
					});
				}else if(btnVal == "确认框"){
					$.messager.confirm("确认框","您确定要关闭?",function(data){
						alert("您的选择是:"+data);
					});
				}else if(btnVal == "输入框"){
					$.messager.prompt("确认框","确认您的工资",function(data){
						alert("您的工资是:"+data);
					});
				}else if(btnVal == "显示框"){
					$.messager.show({
						showType : "slide",//如何显示该消息:null,slide,fade,show
						showSpeed : 500,//窗口显示的过度时间
						width : 300,
						height : 300,
						title : "显示框",
						msg:'消息将在5秒后关闭。',
						timeout : 5000
					});
				}
			});
		</script>
		
			
	</body>
</html>
